<template>
  <div
    class="widgets"
    contenteditable="false"
    @blur="(e) => updateText(e, val.uuid)"
    :style="{
      position:inpage?'relative':'absolute',
      left: val.rect.x + 'mm' ,
      top:  val.rect.y + 'mm',
      width: val.rect.width + 'mm',
      height: val.rect.height + 'mm',
      color: val.color,
      borderTop: borderTop,
      borderLeft: borderLeft,
      borderBottom: borderBottom,
      borderRight: borderRight,
      // overflow: 'hidden',
    }"
  >
    <template v-for="val in subViews">
      <component
        :is="val.viewType"
        :data-title="val.viewType"
        :class="{'active': widgetId === val.uuid}"
        :key="val.uuid"
        :val="val"
        :data-type="val.viewType"
        :data-uuid="val.uuid"
        class="layer"
      ></component>
    </template>
  </div>
</template>

<script>

import {getViewTypeByType, getTypeByViewType, mmConversionPx} from '../../utils/utils'
import viewMixins from "@/mixins/viewMixins";

const WIDGET_NAME = 'YL_TYPE_VIEW'

export default {
  mixins: [viewMixins],
  name: WIDGET_NAME,
  setting: {
    viewType: WIDGET_NAME,
    type: getTypeByViewType(WIDGET_NAME),
    isEdit: true,
    dragable: true, // 是否可拖拽
    resizable: true, // 尺寸是否可变
    value: '线框',
    rect: {
      x: 0,
      y: 0,
      width: 20,
      height: 20
    },
  },
  props: [
    'val', // 文本对象
    'inpage'
  ],
  methods: {
    updateText(e, uuid) {
      let text = e.target.innerHTML
      this.$vptd.commit('updateData', {
        uuid: uuid,
        key: 'value',
        value: text,
      })
    },
  },
}
</script>

